<template>
    <el-form :model="form" :inline="true">
        <el-form-item label="仓库编号">
            <el-input v-model="form.WNumber" />
        </el-form-item>
        <el-form-item label="仓库名称">
            <el-input v-model="form.WName" />
        </el-form-item>
        <el-button type="success" @click="GetShowTime">查询</el-button>
        <el-button type="danger" @click="DelAll">删除</el-button>
    </el-form>
    <el-row>
        <el-col :span="6">
            <el-tree style="max-width: 600px" :highlight-current="true" :default-expand-all="true" :data="MenuList"
                :props="defaultProps" @node-click="handleNodeClick" />
        </el-col>
        <el-col :span="18">
            <el-table :data="WarehouseList" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="warehouseId" label="序号" />
                <el-table-column prop="wNumber" label="仓库编号">
                    <template v-slot="scope">
                        <a @click="warehouse(scope.row.warehouseId)">{{ scope.row.wNumber }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="wName" label="仓库名称">
                    <template v-slot="scope">
                        <a @click="warehouse(scope.row.warehouseId)">{{ scope.row.wName }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="wType" label="所属类别">
                    <template #default="scope">
                        <span v-if="scope.row.wType === 1">成品区</span>
                        <span v-if="scope.row.wType === 2">待检验</span>
                        <span v-if="scope.row.wType === 3">生产车间线边库</span>
                        <span v-if="scope.row.wType === 4">良品区</span>
                        <span v-if="scope.row.wType === 5">业务代发区</span>
                        <span v-if="scope.row.wType === 8">不良品仓库</span>
                        <span v-if="scope.row.wType === 9">商品代发区</span>
                    </template>
                </el-table-column>
                <el-table-column prop="wAddress" label="仓库地址" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                            修改
                        </el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <table>
        <tr>
            <td>
                <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                    :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, sizes" prev-text="上一页"
                    next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    共{{ Page.listcount }}条数据，每页{{ Page.PageSize }}条，共{{ Page.PageIndex }}/{{ Page.pagecount }}页
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                    :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, prev, pager, next" prev-text="上一页"
                    next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    <el-button :disabled="Page.PageIndex == 1" @click="handleCurrentChange(1)">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                    :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, jumper" prev-text="上一页"
                    next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    <el-button :disabled="Page.PageIndex == Page.pagecount"
                        @click="handleCurrentChange(Page.pagecount)">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import http from '../../../http.js'
const route = useRoute();
const router = useRouter();
const form = reactive({
    WNumber: '',
    WName: '',
    WType: '',
    PageIndex: 1,
    PageSize: 10
})
//#region 
//仓库名称跳转
const warehouse = (warehouseId: Number) => {
    router.push('/WarehouseFan?warehouseId=' + warehouseId);
}
//仓库编号跳转
const warehousebh = (warehouseId: Number) => {
    router.push('/WarehouseFan?warehouseId=' + warehouseId);
}
//#endregion

//树形
interface Tree {
    label: string
    children?: Tree[]
}
var hhId = ''
const handleNodeClick = (data: Tree) => {
    hhId = data.value
    console.log(hhId)
}
const defaultProps = {
    children: 'children',
    label: 'label',
}
//生命周期函数钩
onMounted(() => {
    GetMenuList();
    GetShowTime();
})
const menuInfoFatherId = 0;
const MenuList = ref([])
//树形
const GetMenuList = () => {
    axios.get(http.zblnb + '/erpck/api/WareType/GetWareTypeSelectList?id=' + menuInfoFatherId).then((res) => {
        MenuList.value = res.data.data
        console.log(MenuList.value)
    })
}
const WarehouseList = ref([])
//分页
const Page = ref({
    PageIndex: 1,
    PageSize: 10,
    listcount: 0,
    pagecount: 0
})
const handleSizeChange = (val: number) => {
    Page.value.PageSize = val;
    GetShowTime()
}
const handleCurrentChange = (val: number) => {
    Page.value.PageIndex = val;
    GetShowTime()
}
//显示
const GetShowTime = () => {
    axios.get(http.zblnb + '/erpck/api/Warehouse/ShowWarehouse', {
        params: {
            WNumber: form.WNumber,
            WName: form.WName,
            WType: hhId || '',
            PageIndex: Page.value.PageIndex,
            PageSize: Page.value.PageSize
        }
    }).then((res) => {
        WarehouseList.value = res.data.data.list
        Page.value.listcount = res.data.data.listcount
        Page.value.pagecount = res.data.data.pagecount
        console.log(WarehouseList)
    })
}
//修改
const handleEdit = (index: number, row: any) => {
    console.log(index, row)
    router.push({
        path: '/UpdWarehouse',
        query: {
            warehouseId: row.warehouseId
        }
    })
}
//删除
const handleDelete = (index: number, row: any) => {
    ElMessageBox.confirm(
        '确定删除吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post(http.zblnb + '/erpck/api/Warehouse/DelWarehouse', {
                "warehouseId": [row.warehouseId],
                "delName": "王思雨"
            }).then((res) => {
                if (res.data.data > 0) {
                    ElMessage.success('删除成功')
                    GetShowTime()
                }
                else {
                    ElMessage.error('删除失败')
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}
// const checkedvalue = ref([])
// //多选框获取
// const ProductsTypeChange = (val: any) => {
//     checkedvalue.value = val
//     console.log(checkedvalue.value)
// }
const Del = reactive({
    allocateId: [],
    delName: ''
})
interface Warehouse {
    warehouseId: number; // 或者 string  
}
const handleSelectionChange = (val: Warehouse[]) => {
    Del.allocateId = []; // 如果希望每次重置数组，请取消注释  
    val.forEach((item) => {
        if (!Del.allocateId.includes(item.warehouseId)) {
            Del.allocateId.push(item.warehouseId);
        }
    });
    console.log(Del.allocateId);
};
//批量逻辑删除
const DelAll = () => {
    ElMessageBox.confirm(
        '确定删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
    )
        .then(() => {
            axios.post(http.zblnb + '/erpck/api/Warehouse/DelWarehouse', {
                warehouseId: Del.allocateId,
                delName: "王思雨"
            }).then((res) => {
                if (res.data.data > 0) {
                    ElMessage.success('删除成功')
                    GetShowTime()
                }
                else {
                    ElMessage.error('删除失败')
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

</script>